<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运抽奖转盘</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B6B',
                        secondary: '#4ECDC4',
                        accent: '#FFD166',
                        dark: '#2A2D34',
                        light: '#F7FFF7',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
            }
            .transition-transform-slow {
                transition: transform 4s cubic-bezier(0.22, 1, 0.36, 1);
            }
            .pointer-pulse {
                animation: pulse 1.5s infinite;
            }
            @keyframes pulse {
                0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.7); }
                70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 209, 102, 0); }
                100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
            }
        }
        #needle{
    position: absolute;
    top: 160px;
    right: 313px;
    cursor: pointer;
    width: 43px
        }
    </style>
</head>

<body class="bg-gradient-to-br from-dark to-dark/90 min-h-screen flex flex-col items-center justify-center p-4 font-sans text-light">
    <header class="text-center mb-4">
        <h1
            class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent to-secondary mb-2 text-shadow-lg">
            幸运抽奖转盘</h1>
        <p class="text-base text-light/80 max-w-2xl mx-auto">转动转盘，抽取属于你的幸运奖品！</p>
    </header>

    <main class="w-full max-w-6xl flex flex-col lg:flex-row items-center justify-between gap-4">
        <div class="lg:w-2/3 w-full flex flex-col items-center">
            <!-- 抽奖转盘容器 -->
            <div class="relative w-full max-w-2xl aspect-square mb-4">
                <!-- 转盘背景装饰 -->
                <div class="absolute inset-0 bg-accent/20 rounded-full blur-2xl animate-pulse"></div>

                <!-- 外圈奖品转盘 -->
                <div id="outerWheel"
                    class="absolute inset-8 bg-transparent rounded-full border-8 border-accent/80 overflow-hidden shadow-lg shadow-accent/20">
                    <canvas id="outerCanvas" class="w-full h-full"></canvas>
                </div>

                <!-- 内圈桌号转盘 -->
                <div id="innerWheel"
                    class="absolute inset-1/4 bg-transparent rounded-full border-4 border-primary/80 overflow-hidden shadow-lg shadow-primary/20">
                    <canvas id="innerCanvas" class="w-full h-full"></canvas>
                </div>

                <!-- 转盘中心 -->
                <img src="./images/needle.png" id="needle">
            </div>
        </div>

        <div class="lg:w-1/3 w-full flex flex-col gap-4">
            <!-- 奖品列表 -->
            <div class="bg-dark/50 backdrop-blur-md rounded-xl p-4 shadow-lg border border-light/10">
                <h2 class="text-lg font-bold mb-3 text-accent flex items-center">
                    <i class="fa fa-list-ul mr-2"></i> 奖品列表
                </h2>
                <table class="w-full border-collapse border border-light/20">
                    <thead>
                        <tr>
                            <th class="border border-light/20 p-2 bg-dark/30 text-accent">奖项</th>
                            <th class="border border-light/20 p-2 bg-dark/30 text-accent">奖品描述</th>
                            <th class="border border-light/20 p-2 bg-dark/30 text-accent">概率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="border border-light/20 p-2 font-medium">一等奖</td>
                            <td class="border border-light/20 p-2">硬遵一包</td>
                            <td class="border border-light/20 p-2">0.05</td>
                        </tr>
                        <tr>
                            <td class="border border-light/20 p-2 font-medium">二等奖</td>
                            <td class="border border-light/20 p-2">喜贵一包</td>
                            <td class="border border-light/20 p-2">0.07</td>
                        </tr>
                        <tr>
                            <td class="border border-light/20 p-2 font-medium">三等奖</td>
                            <td class="border border-light/20 p-2">15元哦改咯槟榔一包</td>
                            <td class="border border-light/20 p-2">0.08</td>
                        </tr>
                        <tr>
                            <td class="border border-light/20 p-2 font-medium">四等奖</td>
                            <td class="border border-light/20 p-2">红牛一瓶</td>
                            <td class="border border-light/20 p-2">0.15</td>
                        </tr>
                        <tr>
                            <td class="border border-light/20 p-2 font-medium">五等奖</td>
                            <td class="border border-light/20 p-2">6元哦改咯槟榔一包</td>
                            <td class="border border-light/20 p-2">0.15</td>
                        </tr>
                        <tr>
                            <td class="border border-light/20 p-2 font-medium">六等奖</td>
                            <td class="border border-light/20 p-2">东鹏特饮一瓶</td>
                            <td class="border border-light/20 p-2">0.15</td>
                        </tr>
                        <tr>
                            <td class="border border-light/20 p-2 font-medium">七等奖</td>
                            <td class="border border-light/20 p-2">东方树叶一瓶</td>
                            <td class="border border-light/20 p-2">0.15</td>
                        </tr>
                        <tr>
                            <td class="border border-light/20 p-2 font-medium">八等奖</td>
                            <td class="border border-light/20 p-2">苏打水一瓶</td>
                            <td class="border border-light/20 p-2">0.20</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 控制区域 -->
            <div class="bg-dark/50 backdrop-blur-md rounded-xl p-4 shadow-lg border border-light/10">
                <h2 class="text-lg font-bold mb-2 text-accent">当前抽取</h2>
                <div class="flex flex-col md:flex-row items-center justify-between gap-2">
                    <div class="flex-1">
                        <p class="text-light/70 mb-1">桌号</p>
                        <div id="tableResult"
                            class="bg-dark/80 rounded-lg p-2 text-center text-xl font-bold text-primary min-h-[40px] flex items-center justify-center">
                            --</div>
                    </div>
                    <div class="flex-1">
                        <p class="text-light/70 mb-1">奖品</p>
                        <div id="prizeResult"
                            class="bg-dark/80 rounded-lg p-2 text-center text-xl font-bold text-secondary min-h-[40px] flex items-center justify-center">
                            --</div>
                    </div>
                </div>
            </div>

            <!-- 抽奖按钮 -->
            <button id="spinBtn"
                class="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:shadow-primary/30 hover:shadow-secondary/30 transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent/50 pointer-pulse">
                <i class="fa fa-refresh mr-2"></i>开始抽奖
            </button>
        </div>
    </main>

    <footer class="mt-4 text-center text-light/50 text-xs">
        <p>© 2025 xxx台球俱乐部 | 公平公正</p>
    </footer>
    <audio id="spinSound" preload="auto">
        <source src="./audio/spinsound.mp3" type="audio/mpeg">
    </audio>
    <audio id="startSound" preload="auto">
        <source src="./audio/start.mp3" type="audio/mpeg">
    </audio>
    <script>
        // 外围奖品数据，weight概率，概率越大越容易中
        const prizes = [
            { name: '一等奖', color: '#FF5252', weight: 5 },
            { name: '二等奖', color: '#FF9800', weight: 7 },
            { name: '三等奖', color: '#FFEB3B', weight: 8 },
            { name: '四等奖', color: '#4CAF50', weight: 15 },
            { name: '五等奖', color: '#2196F3', weight: 15 },
            { name: '六等奖', color: '#9C27B0', weight: 15 },
            { name: '七等奖', color: '#E91E63', weight: 15 },
            { name: '八等奖', color: '#673AB7', weight: 20 }
        ];
        // 内圈桌号数据
        const tables = Array.from({ length: 30 }, (_, i) => ({
            name: `桌号 ${i + 1}`,
            color: i % 2 === 0 ? '#FF6B6B' : '#4ECDC4',
            weight: 10
        }));
        const outerInitAngel = -90 - (180 / prizes.length);
        const innerInitAngel = -90 - (180 / tables.length);
        const outerAnglePerSection = 360 / prizes.length;
        const innerAnglePerSection = 360 / tables.length;
        // 获取DOM元素
        const outerCanvas = document.getElementById('outerCanvas');
        const innerCanvas = document.getElementById('innerCanvas');
        const outerWheel = document.getElementById('outerWheel');
        const innerWheel = document.getElementById('innerWheel');
        const spinBtn = document.getElementById('spinBtn');
        const tableResult = document.getElementById('tableResult');
        const prizeResult = document.getElementById('prizeResult');
        // 音频元素
        const spinSound = document.getElementById('spinSound');
        const startSound = document.getElementById('startSound');
        function playNumberAudio(tableIndex, prizeIndex) {
            const audioFiles = [];
            //加入恭喜
            const congratulations = new Audio('./audio/gongxi.mp3');
            audioFiles.push(congratulations);
            if (tableIndex >= 10) {
                const firstDigit = Math.floor(tableIndex / 10);
                const secondDigit = tableIndex % 10;
                const firstAudio = new Audio(`./audio/${firstDigit}.mp3`);
                const shiAudio = new Audio(`./audio/10.mp3`);
                audioFiles.push(firstAudio);
                audioFiles.push(shiAudio);
                if (secondDigit != 0) {
                    const secondAudio = new Audio(`./audio/${secondDigit}.mp3`);
                    audioFiles.push(secondAudio);
                }
            } else {
                const digitAudio = new Audio(`./audio/${tableIndex}.mp3`);
                audioFiles.push(digitAudio);
            }
            //加入号桌
            const table = new Audio('./audio/haozhuo.mp3');
            audioFiles.push(table);
            //加入中了
            const win = new Audio('./audio/zhongle.mp3');
            audioFiles.push(win);
            //奖项播报
            if (prizeIndex >= 10) {
                const firstDigit = Math.floor(prizeIndex / 10);
                const secondDigit = prizeIndex % 10;
                const firstAudio = new Audio(`./audio/${firstDigit}.mp3`);
                const shiAudio = new Audio(`./audio/10.mp3`);
                audioFiles.push(firstAudio);
                audioFiles.push(shiAudio);
                if (secondDigit != 0) {
                    const secondAudio = new Audio(`./audio/${secondDigit}.mp3`);
                    audioFiles.push(secondAudio);
                }
            } else {
                const digitAudio = new Audio(`./audio/${prizeIndex}.mp3`);
                audioFiles.push(digitAudio);
            }
            //加入等奖
            const prize = new Audio('./audio/dengjiang.mp3');
            audioFiles.push(prize);
            //加入奖品声音
            const prizeAudio = new Audio(`./audio/prize/${prizeIndex}.mp3`);
            audioFiles.push(prizeAudio);
            function playNextAudio(index) {
                if (index < audioFiles.length) {
                    const audio = audioFiles[index];
                    audio.addEventListener('ended', () => {
                        playNextAudio(index + 1);
                    });
                    audio.play();
                }
            }
            playNextAudio(0);
        }
        // 设置Canvas尺寸
        function setCanvasSize() {
            const size = outerWheel.offsetWidth;
            outerCanvas.width = size;
            outerCanvas.height = size;
            innerCanvas.width = size * 1 / 2;  // 内圈画布增大
            innerCanvas.height = size * 1 / 2;
        }
        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        function getPrize(prizes) {
            // 计算总权重
            const totalWeight = prizes.reduce((sum, prize) => sum + prize.weight, 0);
            // 找出权重最大的奖品及其索引（用于默认返回）
            let maxWeightPrize = prizes[0];
            let maxWeightIndex = 0;
            for (let i = 0; i < prizes.length; i++) {
                if (prizes[i].weight > maxWeightPrize.weight) {
                    maxWeightPrize = prizes[i];
                    maxWeightIndex = i;
                }
            }
            // 生成随机数
            let random = Math.random() * totalWeight;
            // 根据权重决定奖品
            for (let i = 0; i < prizes.length; i++) {
                random -= prizes[i].weight;
                if (random <= 0) {
                    return {
                        prize: prizes[i],
                        index: i
                    };
                }
            }
            // 默认返回权重最大的奖品及其索引
            return {
                prize: maxWeightPrize,
                index: maxWeightIndex
            };
        }
        // 重置转盘到初始位置
        function resetWheels() {
            // 临时移除过渡效果，使重置瞬间完成
            outerWheel.style.transition = 'none';
            innerWheel.style.transition = 'none';
            outerWheel.style.transform = `rotate(${outerInitAngel}deg)`;
            innerWheel.style.transform = `rotate(${innerInitAngel}deg)`;

            // 强制重绘
            void outerWheel.offsetWidth;

            // 重新添加过渡效果，用于后续旋转动画
            outerWheel.style.transition = 'transform 16s cubic-bezier(0.1, 0.8, 0.2, 1)';
            innerWheel.style.transition = 'transform 16s cubic-bezier(0.1, 0.8, 0.2, 1)';
        }
        // 绘制外圈奖品转盘
        function drawOuterWheel() {
            const ctx = outerCanvas.getContext('2d');
            const centerX = outerCanvas.width / 2;
            const centerY = outerCanvas.height / 2;
            const radius = Math.min(centerX, centerY);
            const anglePerSection = (Math.PI * 2) / prizes.length;

            ctx.clearRect(0, 0, outerCanvas.width, outerCanvas.height);

            // 绘制每个奖品扇区
            prizes.forEach((prize, index) => {
                const startAngle = index * anglePerSection;
                const endAngle = (index + 1) * anglePerSection;

                // 绘制扇区
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                ctx.closePath();
                ctx.fillStyle = prize.color;
                ctx.fill();

                // 绘制扇区边框
                ctx.lineWidth = 2;
                ctx.strokeStyle = '#ffffff';
                ctx.stroke();

                // 绘制奖品文字
                ctx.save();
                ctx.translate(centerX, centerY);
                ctx.rotate(startAngle + anglePerSection / 2);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = '#ffffff';
                ctx.font = 'bold 16px Inter, sans-serif';
                ctx.fillText(prize.name, radius * 0.75, 0);
                ctx.restore();
            });
        }

        // 绘制内圈桌号转盘
        function drawInnerWheel() {
            const ctx = innerCanvas.getContext('2d');
            const centerX = innerCanvas.width / 2;
            const centerY = innerCanvas.height / 2;
            const radius = Math.min(centerX, centerY);
            const anglePerSection = (Math.PI * 2) / tables.length;

            ctx.clearRect(0, 0, innerCanvas.width, innerCanvas.height);

            // 绘制每个桌号扇区
            tables.forEach((table, index) => {
                const startAngle = index * anglePerSection;
                const endAngle = (index + 1) * anglePerSection;

                // 绘制扇区
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                ctx.closePath();
                ctx.fillStyle = table.color;
                ctx.fill();

                // 绘制扇区边框
                ctx.lineWidth = 1;
                ctx.strokeStyle = '#ffffff';
                ctx.stroke();

                // 绘制桌号文字 - 调整文字位置
                ctx.save();
                ctx.translate(centerX, centerY);
                ctx.rotate(startAngle + anglePerSection / 2);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = '#ffffff';
                ctx.font = 'bold 14px Inter, sans-serif';  // 增大字体
                ctx.fillText(table.name, radius * 0.75, 0);  // 调整文字位置
                ctx.restore();
            });
        }

        // 初始化转盘
        function initWheels() {
            setCanvasSize();
            drawOuterWheel();
            drawInnerWheel();
            resetWheels();
        }

        // 随机旋转角度
        function getRandomSpinAngle(perAngle, index) {
            return perAngle * index + getRandomInt(3, 6) * 360; // 3-6圈
        }
        // 播放音效
        function playSound(sound) {
            sound.currentTime = 0;
            sound.play().catch(e => console.log('Audio play prevented:', e));
        }

        // 显示中奖公告
        function showAnnouncement(table, prize) {
            // 创建公告元素
            const announcement = document.createElement('div');
            announcement.className = 'fixed inset-0 bg-dark/80 backdrop-blur-md flex flex-col items-center justify-center z-50';
            announcement.innerHTML = `
                <div class="bg-accent text-dark p-8 rounded-2xl shadow-2xl max-w-md w-full mx-4 text-center transform transition-all duration-500 scale-100">
                    <h2 class="text-3xl font-bold mb-4">恭喜！</h2>
                    <p class="text-2xl mb-2">${table} 中了 ${prize}！</p>
                    <div class="mt-6">
                        <button id="closeAnnouncement" class="bg-dark text-accent hover:bg-dark/80 py-3 px-8 rounded-full font-bold transition-colors duration-300">
                            确定
                        </button>
                    </div>
                </div>
            `;

            // 添加到页面
            document.body.appendChild(announcement);


            // 关闭按钮事件
            document.getElementById('closeAnnouncement').addEventListener('click', () => {
                announcement.querySelector('div').classList.add('scale-90', 'opacity-0');
                setTimeout(() => {
                    document.body.removeChild(announcement);
                }, 500);
            });
        }

        // 旋转动画
        let isSpinning = false;

        spinBtn.addEventListener('click', () => {
            if (isSpinning) return;
            isSpinning = true;
            spinBtn.disabled = true;
            spinBtn.classList.add('opacity-70', 'cursor-not-allowed');
            spinBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>抽奖中...';
            // 重置结果显示
            tableResult.textContent = '--';
            prizeResult.textContent = '--';
            resetWheels();
            // 播放 startSound
            playSound(startSound);
            // 监听 startSound 播放结束事件
            startSound.addEventListener('ended', function onEnded() {
                // 移除事件监听器，避免重复触发
                startSound.removeEventListener('ended', onEnded);
                // 播放 spinSound
                playSound(spinSound);
                const outerIndex = getPrize(prizes).index;
                const outerSpinAngle = outerInitAngel - getRandomSpinAngle(outerAnglePerSection, outerIndex);
                const innerIndex = getPrize(tables).index;
                const innerSpinAngle = innerInitAngel - getRandomSpinAngle(innerAnglePerSection, innerIndex);
                // 应用旋转动画
                outerWheel.style.transform = `rotate(${outerSpinAngle}deg)`;
                innerWheel.style.transform = `rotate(${innerSpinAngle}deg)`;

                // 动画结束后
                setTimeout(() => {
                    // 音效暂停
                    spinSound.pause();
                    // 显示结果
                    prizeResult.textContent = prizes[outerIndex].name;
                    tableResult.textContent = tables[innerIndex].name;

                    // 添加结果显示动画
                    prizeResult.classList.add('animate-pulse');
                    tableResult.classList.add('animate-pulse');

                    // 延迟显示中奖公告
                    setTimeout(() => {
                        showAnnouncement(tables[innerIndex].name, prizes[outerIndex].name);

                        prizeResult.classList.remove('animate-pulse');
                        tableResult.classList.remove('animate-pulse');

                        // 重置按钮状态
                        isSpinning = false;
                        spinBtn.disabled = false;
                        spinBtn.classList.remove('opacity-70', 'cursor-not-allowed');
                        spinBtn.innerHTML = '<i class="fa fa-refresh mr-2"></i>再来一次';
                        // 播放桌号语音
                        playNumberAudio(innerIndex + 1, outerIndex + 1);
                    }, 1500);
                }, 13000);
            });
        });

        // 监听窗口大小变化，重新绘制转盘
        window.addEventListener('resize', () => {
            if (!isSpinning) {
                initWheels();
            }
        });
        // 初始化
        initWheels();
    </script>
</body>

</html>